<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/metro.css" />
	<style type="text/css">
		/* 搜索结果高亮 style="color: whitesmoke;background-color: darkred;"*/
		span.search_highlight {
			color: whitesmoke;
			background-color: rgb(255, 0, 0);
		}

		/* 弹框样式 */
		.open {
			padding: 20px;
			text-align: right;
			position: absolute;
			left: 0;
		}

		.open input {
			height: 33px;
			width: 300px;
			margin: 8px 0;
		}
	</style>
	<!-- 定义了一些模拟数据的js文件dataset.js -->
	<script type="text/javascript" src="js/dataset.js"></script>
	<!-- 引入jquery  -->
	<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
	<!-- 引入ztree插件 -->
	<script type="text/javascript" src="js/jquery.ztree.all.min.js"></script>
	<!-- 引入ztree插件扩展功能 -->
	<script type="text/javascript" src="./js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="./js/jquery.ztree.exedit.min.js"></script>
	<script type="text/javascript" src="./js/jquery.ztree.exhide.min.js"></script>
	<script type="text/javascript" src="./js/jquery.ztree.excheck.js"></script>
	<script type="text/javascript" src="layer/layer.js"></script>
	<!-- 引入自定义搜索方法js文件 -->
	<script type="text/javascript" src="js/fuzzysearch.js"></script>

</head>

<body>
	<div>

	</div>
	<div class="content_wrap">
		<input id="keyword" type="search" placeHolder="搜索关键字" style="height: 30px;" />
		<div class="zTreeDemoBackground left">
			<ul id="treeDemo" class="ztree"></ul>
		</div>
	</div>

	<script type="text/javascript">
		//ztree配置
		var setting = {
			check: {
				enable: false //checkbox
			},
			view: {
				nameIsHTML: true, //允许name支持html				
				selectedMulti: false, // 是否允许同时选中多个节点
				dblClickExpand: false, //屏蔽双击事件
				showIcon: true, // 图标显示
				fontCss: { "font-size": "22px", }, // 节点样式
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
			},
			edit: {
				enable: true,
				editNameSelectAll: true,
				removeTitle: "删除节点",
				renameTitle: "编辑节点名称",
				drag: {
					isCopy: false, //所有操作都是move
					isMove: true,
				}
			},
			data: {
				simpleData: {
					enable: true,
					// idKey: "id",
					// pIdKey: "pId",
					idKey: "GSBM",
					pIdKey: "FBM",
				},
				key: {
					name: "GSMC"
				},
				keep: {
					// leaf: true, // 叶节点不能变为根节点
					// paraent: true, // 根节点不能变为叶节点
				},
			},
			callback: { // 回调函数
				beforeDrag: beforeDrag,
				beforeDrop: beforeDrop,
				onDrop: onDrop,
				addHoverDom: addHoverDom,
				beforeRemove: beforeRemove, // 删除节点时触发
				beforeEditName: zTreeBeforeEditName,
				onRemove: onRemove, // 删除节点后触发
				onClick: zTreeOnClick, // 点击事件
			}
		};

		var zNodes = [], className = "dark";
		// 全部目录
		let urlStr = 'http://www.ieta.com.cn:86/cpisAPI/api/Formula/GetFormulaList'
		// 一级目录
		// var urlStr = 'http://www.ieta.com.cn:86/cpisAPI/api/Formula/GetFormulaTreeFrist'
		// 获取医学公式 根据父节点获取子节点
		var son = 'http://www.ieta.com.cn:86/cpisAPI/api/Formula/GetFormulaTreeSonNode'

		$(document).ready(function () {
			//从服务器读取数据并初始化树形图
			loadDataFromServer(urlStr);
			//从本地dataset.js文件读取模拟数据并初始化树形图
			// loadDataFromLocal();
		});

		// 通过ajax方法从服务器获取数据并初始化树形图
		function loadDataFromServer(urlStr) {
			$.ajax({
				type: "get",
				dataType: "json",
				url: urlStr,  //服务请求地址
				data: { token: "1" },
				jsonpCallback: "handleCallback", // 自定义回调函数名
				success: function (data) {
					initThisZtree(data.result);//传入数据,初始化ztree
					// console.log(data.result);
					fuzzySearch('treeDemo', '#keyword', null, true); //初始化模糊搜索方法
				}
			});
		}
		// 从本地js/dataset.js文件读取模拟数据并初始化树形图
		function loadDataFromLocal() {
			//此处的树节点数据mockData是在本地js/dataSet.js中预先定义的模拟数据
			initThisZtree(mockData);//传入数据,初始化ztree
			// zTreeId ztree对象的id,不需要#
			// searchField 输入框选择器
			// isHighLight 是否高亮,默认高亮,传入false禁用
			// isExpand 是否展开,默认合拢,传入true展开
			fuzzySearch('treeDemo', '#keyword', null, true); //初始化模糊搜索方法
		}
		/**
		 * 初始化ztree
		 * @param {Object} data
		 */
		function initThisZtree(data) {
			//初始化ztree三个参数分别是(jQuery对象,ztree设置,树节点数据)
			var treeObj = $.fn.zTree.init($("#treeDemo"), setting, data);
			treeObj.expandAll(false); // 默认展开全部节点
		}
		// 节点点击事件
		function zTreeOnClick(event, treeId, treeNode) {
			console.log(treeNode);
			// 点击请求子节点
			// var treeObj = $.fn.zTree.getZTreeObj(treeId);
			// if (!treeNode.children) {//判断是否有子节点
			// 	$.ajax({
			// 		url: son,
			// 		dataType: "json",
			// 		data: { fbm: treeNode.GSBM },
			// 		aysnc: true,
			// 		success: function (data) {
			// 			newNode = treeObj.addNodes(treeNode, data.result);
			// 		}
			// 	});
			// }
		}
		// 拖拽移动节点前处理
		function beforeDrag(treeId, treeNodes) {
			for (var i = 0, l = treeNodes.length; i < l; i++) {
				if (treeNodes[i].drag === false) {
					return false;
				}
			}
			return true;
		}
		// 拖拽释放之后,结束之前执行
		function beforeDrop(treeId, treeNodes, targetNode, moveType) {
			return targetNode ? targetNode.drop !== false : true;
		}
		//用于捕获节点拖拽操作结束的事件回调函数  默认值： null
		function onDrop(event, treeId, treeNodes, targetNode, moveType) {
			// 拖拽成功时，修改被拖拽节点的pid
			// console.log(treeNodes);
			console.log('#' + targetNode.tId + "_span");
			// var treeObj = $.fn.zTree.getZTreeObj(treeId);
			// var nodes = treeObj.getNodesByParam("GSBM", targetNode.GSBM, null);
			// console.log(nodes);
			$(targetNode.tId + "_span").click()
		}
		// 删除节点前,执行的函数
		function beforeRemove(treeId, treeNode) {
			console.log('删除时', treeNode)
			className = (className === "dark" ? "" : "dark");
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			return confirm("确认删除 节点 -- " + treeNode.GSMC + " 吗？");
		}
		// 删除节点后,执行的函数
		function onRemove(e, treeId, treeNode) {
			console.log('删除后', treeNode);
		}
		// 编辑
		function zTreeBeforeEditName(treeId, treeNode) {
			layer.open({
				type: 1,
				title: ['添加节点', 'font-size:18px'],
				area: ['550px', '430px'],
				shadeClose: false, //点击遮罩关闭
				content:
					`<div class="open" >
						父编码：<input id="fbm" type="text" placeHolder="请输入公式编码" /><br>
						公式编码：<input id="gsbm" type="text" placeHolder="请输入公式编码" /><br>
						公式名称：<input id="GSMC" type="text" placeHolder="请输入公式名称" /><br>
						类型：<input id="LX" type="text" placeHolder="请输入类型" /><br>
						是否有子节点：<input id="SONFLAG" type="text" placeHolder="输入Y或N" /><br>
					 </div>`,
				btn: ['确定', '关闭'],
				yes: function (index, layero) {
					let txtReason = $(".open").find('input');
					// 搜集参数
					let data = {
						id: (100 + newCount),
						FBM: txtReason[0].value,
						GSBM: txtReason[1].value,
						GSMC: txtReason[2].value,
						LX: txtReason[3].value,
						SONFLAG: txtReason[4].value
					}
					refreshNode(data, treeNode)
					layer.close(index); // 关闭窗口
				}
			})
		}
		// 更新节点
		function refreshNode(data, treeNode) {
			var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo")
			var nodes = zTreeObj.getNodesByParam("GSBM", treeNode.GSBM, null);
			nodes[0].FBM = data.FBM
			nodes[0].GSMC = data.GSMC
			nodes[0].GSBM = data.GSBM
			nodes[0].LX = data.LX
			nodes[0].SONFLAG = data.SONFLAG
			zTreeObj.updateNode(nodes[0])
			zTreeObj.reAsyncChildNodes(nodes[0], 'refresh', false)
		}
		// 添加节点
		var newCount = 1;
		var name, age;
		function addHoverDom(treeId, treeNode) {
			var sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
			var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
				+ "' title='添加节点' onfocus='this.blur();'></span>";
			sObj.after(addStr);
			var btn = $("#addBtn_" + treeNode.tId);
			if (btn) btn.bind("click", function () {
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				// 弹出层
				layer.open({
					type: 1,
					title: ['添加节点', 'font-size:18px'],
					area: ['550px', '380px'],
					shadeClose: false, //点击遮罩关闭
					content:
						`<div class="open" >
						公式编码：<input id="gsbm" type="text" placeHolder="请输入公式编码" /><br>
						公式名称：<input id="GSMC" type="text" placeHolder="请输入公式名称" /><br>
						类型：<input id="LX" type="text" placeHolder="请输入类型" /><br>
						是否有子节点：<input id="SONFLAG" type="text" placeHolder="输入Y或N" /><br>
					 </div>`,
					btn: ['确定', '关闭'],
					yes: function (index, layero) {
						let txtReason = $(".open").find('input');
						// 搜集参数
						let data = {
							id: (100 + newCount),
							FBM: treeNode.GSBM,
							GSBM: txtReason[0].value,
							GSMC: txtReason[1].value,
							LX: txtReason[2].value,
							SONFLAG: txtReason[3].value
						}
						zTree.addNodes(treeNode, data); // 添加节点
						layer.close(index); // 关闭窗口
					}
				});
				return false;
			});
		};	
		// 设置鼠标从节点移出时，删除由addHoverDom增加的按钮
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_" + treeNode.tId).unbind().remove();
		};

	</script>

</body>

</html>